<template lang="pug">
    div(class="flex-column control-line")
        div(class="flex-column-item",
            v-for="item in grids",:key="item",
            :class="{'actived': item==current}")
            
</template>
<script>
export default {
    name: 'control-line',
    props:{
        total: {type: Number, default:3},
        current:{type: Number, default: 0}
    },
    computed:{
            grids(){
                var results = [];
                for(var index = 0 ;index< this.total;index++)
                    results.push(index)
                return results
            }
        },
    methods:{},
    created(){}
}
</script>
<style lang="less">
.control-line{
    height:95%;
    border:1px solid #090909;
    max-width: 10px;
    min-width:10px;
}
.actived{
    background: #090909;
}
</style>